<template>
	<view>
		<view class="search_box">
			<my-search></my-search>
		</view>
		
	
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperlist" :key="i">
				<image :src="item" class="swiper_img"></image>
			</swiper-item>
		</swiper>

	
	
	<!--	
		<view style="display:flex;" class="nav">
			<view v-for="(item, i) in navlist" :key="i" class="nav_item" @click="nav_click(item)">
				<image :src="item.image_src"></image>
			</view>
		</view>
	-->
		
		<view class="floor_item">
			
			<view class="bbox">
				<text style="font-weight: bold; font-size: 17px;">紫菘</text>
				<view style="display: flex; align-items: center;" @click="to_address" data-address="紫菘">
					<text style="font-size: 14px;">详情点击</text>
					<uni-icons type="arrowright" size="14"></uni-icons>
				</view>
			</view>
			
			<view class="floor_img">
								
				<view class="right">
					<view v-for="(item, j) in floorlist1" :key="j" v-if="j<4" class="name" @click="gotodetail(item)">
						<image :src="item.pictures[0]"></image>
						<view style="display: flex; justify-content: space-between;">
							<text style="margin-left: 10px;">{{item.name}}</text>
							<text style="color: #C00000; margin-right: 10px;"> ￥{{item.price | tofixed}}</text>
						</view>
					</view>
				</view>	
				
			</view>
			
		</view>
		
		<view class="floor_item">
			
			<view class="bbox">
				<text style="font-weight: bold; font-size: 17px;">沁苑</text>
				<view style="display: flex; align-items: center;" @click="to_address" data-address="沁苑">
					<text style="font-size: 14px;">详情点击</text>
					<uni-icons type="arrowright" size="14"></uni-icons>
				</view>
			</view>
			
			<view class="floor_img">
				
				<view class="right">
					<view v-for="(item, j) in floorlist2" :key="j" v-if="j<4" class="name" @click="gotodetail(item)">
						<image :src="item.pictures[0]"></image>
						<view style="display: flex; justify-content: space-between;">
							<text style="margin-left: 10px;">{{item.name}}</text>
							<text style="color: #C00000; margin-right: 10px;"> ￥{{item.price | tofixed}}</text>
						</view>
					</view>
				</view>	
				
			</view>
			
		</view>
		
		<view class="floor_item">
			
			<view class="bbox">
				<text style="font-weight: bold; font-size: 17px;">韵苑</text>
				<view style="display: flex; align-items: center;" @click="to_address" data-address="韵苑">
					<text style="font-size: 14px;">详情点击</text>
					<uni-icons type="arrowright" size="14"></uni-icons>
				</view>
			</view>
			
			<view class="floor_img">
				
				<view class="right">
					<view v-for="(item, j) in floorlist3" :key="j" v-if="j<4" class="name" @click="gotodetail(item)">
						<image :src="item.pictures[0]"></image>
						<view style="display: flex; justify-content: space-between;">
							<text style="margin-left: 10px;">{{item.name}}</text>
							<text style="color: #C00000; margin-right: 10px;"> ￥{{item.price | tofixed}}</text>
						</view>
					</view>
				</view>	
				
			</view>
			
		</view>

	</view>
	
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex'
	
	export default {
		data() {
			return {
				swiperlist: ['https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d7eb0927-009a-4978-be07-950484b5bd54/c3bcba04-0354-481a-aa1e-4402d7ee1bbc.png', 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d7eb0927-009a-4978-be07-950484b5bd54/56e2b0f4-da84-4d1c-b3d0-1a50d732bce4.jpg', 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d7eb0927-009a-4978-be07-950484b5bd54/ff7a8dbd-9011-4c93-9b1d-28d3bfcbf9f1.jpg', 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d7eb0927-009a-4978-be07-950484b5bd54/959fd098-a8e3-4f88-85db-859bdd49001b.jpg', 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d7eb0927-009a-4978-be07-950484b5bd54/f2bcaa2d-ea73-4ef9-b3e5-08ea277d2311.jpg'],
			//	navlist: [],
				floorlist1: [],
				floorlist2: [],
				floorlist3: [],
				
			}; 
		},
		onLoad() {
		//	this.get_swiper()
		//	this.get_nav()
			this.cha()
		//	this.get_floor()
		},

		onPullDownRefresh() {
			this.cha()
			uni.stopPullDownRefresh()
		},
		computed: {
			...mapState('m_cart', ['cart']),
			...mapGetters('m_cart', ['total']),
			...mapGetters('m_cart', ['pay_total'])
		},
		onShow() {
			this.cha()
			this.setCartNum()
		},
		methods: {
		/*	async get_swiper() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/swiperdata')
				if(res.meta.status == 200){
					this.swiperlist = res.message 
				}else{
					return uni.$failmsg()
				}
			},
			async get_nav() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/catitems')
				if(res.meta.status == 200){
					this.navlist = res.message 
				}else{
					return uni.$failmsg()
				}
			},*/
			async cha(){
				const db = uniCloud.database();
				//用await保证函数彻底执行完，数据返回完毕后再执行下面的代码,limit(1),取第一条数据，get(),执行查询操作
				this.res = await db.collection("category").get();
				console.log(this.res)
				//获得的数据藏在res.result.data里，取值就行了
				this.floorlist1 = this.res.result.data.filter(x => x.address === "紫菘") 
				this.floorlist2 = this.res.result.data.filter(x => x.address === "沁苑")
				this.floorlist3 = this.res.result.data.filter(x => x.address === "韵苑")
			},
			
		/*	async get_floor() {
				const {data: res} = await uni.$http.get('/api/public/v1/home/floordata')
				if(res.meta.status == 200){
					res.message.forEach(floor => {
						floor.product_list.forEach(prod => {
							prod.url = '/subpkg/floor_goods/floor_goods?' + prod.navigator_url.split('?')[1]
						})
					})
					this.floorlist = res.message 
				}else{
					return uni.$failmsg()
				}
			},
			nav_click(item) {
				if(item.name == '分类'){
					uni.switchTab({
						url: '/pages/cate/cate'
					})
				}
			},*/
			
			setCartNum() {
				if(this.pay_total == 0){
					uni.hideTabBarRedDot({
						index: 3,
					})
				}else{
					uni.setTabBarBadge({
						index: 3,
						text: this.pay_total + ''
					})
				}		
			},
			to_address(e) {
			//	console.log(e.currentTarget.dataset.address)
				uni.navigateTo({
					url: '/subpkg/address/address?loc=' + e.currentTarget.dataset.address
				})
			},
			gotodetail(item) {
				uni.navigateTo({
					url: '/subpkg/goods_detail/goods_detail?goods_id=' + item._id
				})
			}
		},
		filters: {
			tofixed(num) {
				return Number(num).toFixed(2)
			}
		}
	}
</script>

<style lang="scss">
	
	
	swiper {
		height: 200px;
		width: 100%;
	}
	.swiper_img {
		height: 200px;
		width: 100%;
	}
	.nav {
		height: 200rpx;
		justify-content: space-around;
		border: 2rpx solid #efefef;
	}
	.nav_item {
		width: 17%;
		height: 150rpx;
	}
	.nav_item image {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}
	

	.right {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
	}

	.search_box {
		position: sticky;
		top: 0;
		z-index: 999;
	}
	
	.floor_img {
		display: flex;
	}

	.bbox {
		display: flex; 
		justify-content: space-between; 
		align-items: center; 
		height: 30px; 
		padding-left: 5px;
		margin-bottom: 2px;
	}
	
	.floor_item {
		margin-bottom: 65rpx; 
		margin-top: 10rpx; 
		margin-left: 3px;
	}
	
	.name {
		background-color: white;
		display: flex;
		flex-direction: column;
		align-content: space-between;
		height: 200px;
		width: 49%;
		border-bottom-left-radius: 9%;
		border-bottom-right-radius: 9%;
		margin-bottom: 7px;
	}
	.name image {
		width: 100%;
		vertical-align: text-top; 
		height: 148px; 
		margin-bottom: 12px;
	}
	
	.name text {
		font-size: 15px;
		font-weight: 550;
		margin-left: 8px;
	}

</style>
